<script setup lang="ts">
import { Ref, ref, getCurrentInstance, ComponentInternalInstance } from "vue"
import { User, Unlock } from '@element-plus/icons'
import { RULES } from '@/configs/login'
import { login } from 'api/login'
import { getImageUrl } from 'util/util'



// get Instance
const instance: ComponentInternalInstance | null = getCurrentInstance();
let _this: any = instance ? instance.appContext.config.globalProperties : null;

// 获取dom
const dom: HTMLElement | null = document.getElementById('app');
if (dom) dom.style.background = getImageUrl('../assets/b1.jpg');



// 路由
let state: string | null = localStorage.getItem('state');
if (state === 'true') _this.$router.push({ name: 'index' })

// ref
let loginForm: Ref<StringObject> = ref({
  username: '',
  password: '',
})
let formRef: Ref<any> = ref(null);
let passwordRef: Ref<any> = ref(null);
let rules: AnyObject = RULES

// login function
const enter: Function = (key): void => {
  if ((key === undefined || key.code === 'Enter') && formRef.value) {

    formRef.value.validate(async (valid) => {
      if (valid) {
        let { data } = await login(loginForm.value);
        _this.$message({
          message: data.message,
          type: data.code === 0 ? 'success' : 'error'
        })
        if (data.code === 0) {
          // 保存登录状态
          localStorage.setItem('state', 'true')
          localStorage.setItem('token', JSON.stringify(data.token))
          _this.$router.push({ name: 'index' })
          setTimeout(() => {
            _this.$store.commit('setTransition', 'fade')
          }, 1000)
        }
      }
    })
  }
}

// focus
const input_focus: Function = (key): void => {
  if (key.code === 'Enter' && passwordRef.value) passwordRef.value.focus()
}

// jump to the register page
const toRegister: Function = (): void => {
  _this.$router.push({ name: 'register' })
}

</script>


<template>
  <div id="login">
    <div class="form-wrapper">
      <!-- title -->
      <div class="title">Welcome to template</div>

      <!-- input -->
      <div class="input-wrap">
        <div class="input-wrap-sub">
          <el-form ref="formRef" :model="loginForm" :rules="rules" class="w100">
            <el-form-item prop="username">
              <el-input
                ref="username"
                :prefix-icon="User"
                placeholder="Your username"
                v-model="loginForm.username"
                @keyup="input_focus($event)"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                ref="passwordRef"
                :prefix-icon="Unlock"
                placeholder="Your username"
                v-model="loginForm.password"
                @keyup="enter($event)"
              ></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>

      <!-- buttons -->
      <div class="button-wrap flex flex-row justify-between items-between">
        <el-button type="primary" @click="enter(undefined)">Login</el-button>
        <el-button type="primary" @click="toRegister()">Register</el-button>
      </div>
    </div>
    <div class="quoto">©Copyright - 2021 @Wudong/Nymo</div>
  </div>
</template>


<style lang="scss" scoped>
@import "styles/mixin.scss";
#login {
  width: 100vw;
  height: 100vh;
  position: relative;
  @include flex-column-center-center;
}
.title {
  height: 33%;
  font-weight: bold;
  font-size: 2rem;
  color: white;
  text-shadow: 0px 0px 10px rgba(41, 41, 41, 0.897);
  @include flex-column-center-center;
}
.form-wrapper {
  width: 600px;
  height: 300px;
  background-color: rgba($color: #ffffff, $alpha: 0.1);
  box-shadow: inset 0px 0px 40px black;
  border-radius: 1rem;
  position: relative;
}

.input-wrap {
  width: 100%;
  height: 30%;
  margin: 0% auto 5% auto;
  @include flex-column-between-center;
  .input-wrap-sub {
    width: 70%;
    @include flex-row-center-center;
  }
}

.button-wrap {
  width: 70%;
  margin: 0 auto;
}

.icon {
  font-size: 1.7rem;
  padding-right: 0.3rem;
}
.quoto {
  position: absolute;
  line-height: 1rem;
  bottom: 1rem;
  color: white;
  font-size: 0.8rem;
  text-shadow: 0px 0px 10px rgba(41, 41, 41, 0.897);
}
</style>